Skip to content

Conversation

pamelafox
Copy link
Collaborator

@pamelafox pamelafox commented Aug 18, 2025

Purpose

This PR makes homepage accessibility and adds a basic check to ensure it remains accessibility.

  • Adds a single main landmark wrapping routed content in Layout.tsx to satisfy Axe one-main-landmark rule.
  • Adds basic accessibility audit to e2e.py using axe-playwright-python (runs Axe on home page and initial chat view). See my blog post for more details on how that works.

Fixes #2677

Does this introduce a breaking change?

When developers merge from main and run the server, azd up, or azd deploy, will this produce an error?
If you're not sure, try it out on an old environment.

[ ] Yes
[X] No

Does this require changes to learn.microsoft.com docs?

This repository is referenced by this tutorial
which includes deployment, settings and usage instructions. If text or screenshot need to change in the tutorial,
check the box below and notify the tutorial author. A Microsoft employee can do this for you if you're an external contributor.

[ ] Yes
[X] No

Type of change

[X] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Documentation content changes
[ ] Other... Please describe:

Code quality checklist

See CONTRIBUTING.md for more details.

  • The current tests all pass (python -m pytest).
  • I added tests that prove my fix is effective or that my feature works
  • I ran python -m pytest --cov to verify 100% coverage of added lines
  • I ran python -m mypy to check for type errors
  • I either used the pre-commit hooks or ran ruff and black manually on my code.

@pamelafox pamelafox changed the title a11y: one main landmark + Axe Playwright test Fix a11y landmark issue and add Axe Playwright test Aug 18, 2025
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR addresses accessibility compliance by adding a main landmark element and implementing automated accessibility testing. The changes ensure the application meets basic accessibility standards and includes ongoing validation.

  • Adds a main landmark wrapper to satisfy Axe accessibility requirements
  • Introduces automated accessibility testing using axe-playwright-python
  • Includes necessary CSS styling for the new main element

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File Description
app/frontend/src/pages/layout/Layout.tsx Wraps routed content with semantic main element
app/frontend/src/pages/layout/Layout.module.css Adds flexbox styling for the new main container
tests/e2e.py Integrates Axe accessibility testing into existing e2e tests
requirements-dev.txt Adds axe-playwright-python dependency for accessibility testing

@pamelafox pamelafox merged commit fd5ba93 into Azure-Samples:main Aug 20, 2025
26 checks passed
@pamelafox pamelafox deleted the fix/a11y-axe-test-and-main-landmark branch August 20, 2025 05:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix accessibility issue with main page: one main landmark
2 participants